import React from 'react'
import {Menu, Icon} from 'antd'
import {Link} from 'react-router-dom';
import './style.css'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {logout} from '../../../actions/auth'


class Navbar extends React.Component{

    state = {
        current: 'index',
    };

    handleClick = (e) =>{
        console.log('click', e);
        this.setState({
            current: e.key,
        });
    };


    render(){
        return(
            <Menu onClick={this.handleClick}
                  selectedKeys={[this.state.current]}
                  mode="horizontal">
                <Menu.Item key="index">
                    <Link to={`/index`}><Icon type="appstore"/>首页</Link>
                </Menu.Item>
                <Menu.Item key="my-note">
                    <Link to={`/my-note/1`}><Icon type="bars"/>我的笔记</Link>
                </Menu.Item>
                <Menu.Item key="edit-note">
                    <Link to={`/add-note`}><Icon type="edit"/>新建笔记</Link>
                </Menu.Item>
                {!this.props.auth.token ?
                <Menu.Item className='rightBtn' key="login">
                    <Link to={`/login`}>登录</Link>
                </Menu.Item> :
                    <div>
                    <Menu.Item className='rightBtn' key="setting">
                        <Link to={`/user`}><Icon type="setting"/>个人设置</Link>
                    </Menu.Item>
                        <Menu.Item onClick={this.props.logout()} className='rightBtn' key="logout">
                            <a>登出</a>
                        </Menu.Item>
                    </div>}
            </Menu>
        )
    }

}

const mapStateToProps = ({auth}) => ({auth});
const mapDispatchToProps = (dispatch) => (bindActionCreators({logout}, dispatch));
export default connect(mapStateToProps, mapDispatchToProps)(Navbar)